<template>
<div class="login">
  <div class="login-body">
    <h3 class="login-body__title t-c ft-24">管理系统</h3>
    <div class="login-body__wrap">
      <div class="login-form">
        <el-form :model="formData"  :rules="rules" ref="formData" class="wd100">
          <el-form-item>
            <p class="login-tit">登录</p>
          </el-form-item>
          <el-form-item prop="phoneNo">
            <el-input  placeholder="请输入11位的手机号"  v-model.trim="formData.phoneNo" autocomplete="off" clearable></el-input>
          </el-form-item>
          <el-form-item prop="adminUser">
            <el-select placeholder="请选择是否实是管理者" v-model="formData.adminUser" class="wd100">
              <el-option label="管理者" value="admin"></el-option>
              <el-option label="普通员工" value="editor"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="userState" v-if="formData.adminUser === 'editor'">
            <el-select placeholder="请选择是否实名认证" v-model="formData.userState" class="wd100">
              <el-option label="未实名认证" value="98"></el-option>
              <el-option label="已实名认证" value="00"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="password" class="l_group">
            <el-input  class="input_password" placeholder="密码" v-model.trim="formData.password" autocomplete="new-password" :type="passw">
              <i slot="suffix" class="iconfont" :class="icon" @click="showPass"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="imageCode">
            <el-col :span="16">
              <el-input placeholder="图形验证码" v-model.trim="formData.imageCode" autocomplete="off" clearable></el-input>
            </el-col>
            <el-col :span="8">
              <span class="auth-img">
                <img alt="" @click="getImgCode" v-bind:src="basesrc" class="cursor-hand">
              </span>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button @click="loginIn('formData')" :loading="loading" @keyup.enter="loginIn('formData')" type="primary" class="wd100" v-stop-reClick>登录</el-button>
          </el-form-item>
          <div class="row-tip">
            <span class="no-reg">还没注册?
              <span class="btn-reg" @click="toRegister">注册</span>
            </span>
            <span class="fgt-pdw" @click="toMdfPassword">忘记密码?</span>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import '@/style/login.less'
import { mapState } from 'vuex'
// import sha256 from 'js-sha256'
export default {
  data() {
    return {
      loading: false,
      passw: 'password',
      icon: 'icon-login-close',
      loginInfo: {
        merchName: '小可爱',
        phoneNo: '12222222212',
        merchCertType: '01',
        merchCertId: '334567890567892345',
        mcc: '2345',
        province: '浙江省',
        city: '杭州市',
        county: '拱墅区',
        qulifLincPic: require('@/assets/1.jpg'),
        qulifShopPic: require('@/assets/2.jpg'),
        userState: '00'
      },
      formData: {
        phoneNo: this.$route.query.phoneNo || 13456789023,
        password: '',
        imageCode: '',
        imageKey: '',
        userState: '',
        adminUser: ''
      },
      rules: {
        phoneNo: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '请输入正确手机号', trigger: 'change' }
        ],
        userState: [
          { required: true, message: '请选择是否实名认证', trigger: 'change' }
        ],
        adminUser: [
          { required: true, message: '请选择是否是管理者', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' }
        ],
        imageCode: [
          { required: true, message: '请输入图形验证码', trigger: 'blur' },
          {
            min: 4, max: 4, message: '请输入正确的图形验证码', trigger: 'blur'
          }
        ]
      },
      basesrc: require('@/assets/yzm.png'),
      imagekey: ''
    }
  },
  computed: {
    ...mapState({
      windowSize: 'windowSize'
    })
  },
  created () {
  },
  mounted () {
    window.addEventListener('keydown', this.keyDown)
    const queryNo = this.$route.query.phoneNo
    if (queryNo) {
      this.phoneNo = queryNo
    }
    this.getImgCode()
  },
  destroyed () {
    window.removeEventListener('keydown', this.keyDown, false)
  },
  methods: {
    keyDown (e) {
      if (e.keyCode === 13) {
        this.loginIn('formData')
      }
    },
    login (val) {
      // const param = {
      //   ...this.formData,
      //   transCode: 'PDFMM0006',
      //   password: sha256(this.formData.password)
      // }
      this.loading = true
      setTimeout(() => {
        this.loading = false
        localStorage.setItem('adminUser', this.formData.adminUser)
        this.$store.dispatch('login', { phoneNo: this.formData.phoneNo, userState: this.formData.userState }).catch(() => { this.loading = false })
        if (this.formData.adminUser === 'admin') {
          this.$router.push({ path: '/user/info' })
          localStorage.setItem('addUser', JSON.stringify(this.loginInfo))
        } else {
          if (this.formData.userState === '98') {
            this.$router.push({ path: '/userAuth', query: { phoneNo: this.formData.phoneNo } })
          } else {
            this.$router.push({ name: 'info', query: { phoneNo: this.formData.phoneNo } })
            this.loginInfo.phoneNo = this.formData.phoneNo
            localStorage.setItem('addUser', JSON.stringify(this.loginInfo))
          }
        }
      }, 1000)
    },
    logOut () {
      this.$store.dispatch('logout')
    },
    toRegister () {
      this.$router.push('/register')
    },
    toMdfPassword () {
      this.$router.push({ path: '/pwdReset', query: { phoneNo: this.formData.phoneNo } })
    },
    getImgCode () {
      this.basesrc = require('@/assets/yzm2.png')
      this.formData.imageKey = '1234343534'
    },
    loginIn (val) {
      this.$refs[val].validate((valid) => {
        if (!valid) return
        this.login(val)
      })
    },
    showPass () {
      if (this.passw === 'text') {
        this.passw = 'password'
        this.icon = 'icon-login-close'
      } else {
        this.passw = 'text'
        this.icon = 'icon-login-open'
      }
    }
  }
}
</script>
<style lang="less" scoped>
.login {
  .auth-img {
    display: inline-block;
    width: 80px;
    height: 40px;
    margin-left: 10px;
    > img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
